<template>
	<div>
		<h3>counter子组件</h3>
		<div>
			<button type="button" @click="increment">增加</button>
			<button type="button" @click="decrement">减少</button>
			<br />
			<!-- <input type="text" v-model="count" /> -->
			<input type="text" v-model="$store.state.count" />
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// count: this.$store.state.count
		};
	},
	methods: {
		// 不推荐这样使用 -- 不符合 vuex 的设计理念, 而且 不利于代码的维护
		// 数字增加
		/* increment() {
			this.$store.state.count++;
		},
		// 数字减少
		decrement() {
			this.$store.state.count--;
		} */
		increment () {
			this.$store.commit("increment", 2);
		},
		decrement () {
			this.$store.commit("decrement", { m: 2, n: 1 });
		}
	}
};
</script>

<style scoped></style>
